<template>
    <el-card shadow="hover" class="community">
        <el-input :type="inputType" v-model="content" resize="none" :autosize="{ minRows: 2 }" :placeholder="placeholder"></el-input>
        <div class="box">
            <div style="display: flex">
                <el-form>
<!--                    <el-upload-->
<!--                        class="upload-demo"-->
<!--                        action="#"-->
<!--                        :on-preview="handlePreview"-->
<!--                        :on-remove="handleRemove"-->
<!--                        :before-remove="beforeRemove"-->
<!--                        multiple-->
<!--                        :limit="3"-->
<!--                        :on-exceed="handleExceed"-->
<!--                        :file-list="fileList">-->
<!--                        <el-button type="text">点击上传</el-button>-->
<!--                        <el-divider direction="vertical" />-->
                    <el-popover placement="bottom" trigger="hover">
                        <v-emoji-picker @select="selectEmoji" />
                        <el-button slot="reference" type="text">😊表情</el-button>
                    </el-popover>
<!--                    </el-upload>                 -->
                </el-form>
            </div>
            <el-button size="mini" type="success" icon="el-icon-edit" @click.native="publish">{{ buttonText }}</el-button>
        </div>
        
    </el-card >
</template>

<script>
import { mapGetters } from "vuex";
import commentApi from '@/views/api/comment/comment'
export default {
    props: {
        inputType: {
            type: String,
            default: 'text'
        },
        placeholder: String,
        buttonText: String,
        courseId: Number
    },
    data() {
        return {
            content: '',
            fileList: [],
            actionUrl: ''
        }
    },
    computed: {
        ...mapGetters(['userInfo', 'courseInfo'])
    },
    methods: {
        selectEmoji(emoji) {
            let input = document.querySelector('.el-textarea__inner')
            let startPos = input.selectionStart
            let endPos = input.selectionEnd
            let resultText = input.value.substring(0, startPos) + emoji.data + input.value.substring(endPos)
            input.value = resultText
            input.focus()
            input.selectionStart = startPos + emoji.data.length
            input.selectionEnd = startPos + emoji.data.length
            this.content = resultText
        },
        publish() {
            commentApi.add({
                content: this.content,
                userId: this.userInfo.id,
                courseId: this.courseInfo.id,
                thumbsNumber: 0,
                responseNumber: 0
            }).then(response => {
                this.content = ''
                this.$emit('isReload', true)
                this.$message.success('发布成功')
            }).catch(error => {
                this.$message.error('发布失败')
            })
            
        },
    }
}
</script>

<style lang="scss" scoped>
.box {
    display: flex;
    justify-content: space-between
}
.community {
    padding: 10px;
}
.el-textarea {
    ::v-deep.el-textarea__inner {
        background-color: #f8f8f8
    }
}
.el-button {
    margin-top: 10px
}
</style>
